<template>
    <div>
        <vue-particles id="tsparticles" :particlesLoaded="particlesLoaded" :options="options" />
        <div class="formContainer">
            <h3>智慧校园-学生学业质量分析系统</h3>
            <el-form ref="loginFormRef" :model="loginForm" :rules="rules" label-width="120px" class="loginForm"
                :size="formSize" status-icon>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginForm.username" />
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(loginFormRef)">登录</el-button>
                    <el-button @click="resetForm(loginFormRef)">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- <button @click="handleMockLoginWithAdminPrivilege()">模拟登录-管理员</button>
        <button @click="handleMockLoginWithLecturerPrivilege()">模拟登录-讲师</button> -->
    </div>
</template>

<script setup>
// import options from '../util/particle-options'
import options from '../util/particle-options-fireworks-preset'
import axios from 'axios'
// 粒子特效加载完之后的回调
const particlesLoaded = async container => {
    // console.log("Particles container loaded", container)
}

import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
const formSize = ref('default')

const loginFormRef = ref('loginFormRef')
const loginForm = reactive({
    username: 'candywall',
    password: '123456'
})

const rules = reactive({
    username: [
        { required: true, message: '用户名不为空！', trigger: 'blur' },
        { min: 2, max: 20, message: '用户名长度在2到20个字符之间', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不为空！', trigger: 'blur' },
        { min: 3, max: 16, message: '密码长度在3到16个字符之间', trigger: 'blur' }
    ]
})

import useRouterStore from '../store/useUserStore'
import { useRouter } from 'vue-router'
const router = useRouter()
const { changeUser } = useRouterStore()

const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            try {
                // const res = await axios.post('/adminapi/users/login', loginForm)
                const res = await Promise.any([axios.post('/adminapi/users/login', loginForm), axios.post('/adminapi/students/login', {
                    studentname: loginForm.username,
                    password: loginForm.password
                })])
                const { status, data } = res.data
                // console.log(data)
                if (status === 'success') {
                    changeUser(data)
                    // 跳转到首页
                    router.push('/')
                } else {
                    ElMessage.error('用户名或密码错误！')
                }
            } catch (error) {
                ElMessage.error('用户名或密码错误！')
            }
        }

    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

const handleMockLoginWithAdminPrivilege = () => {
    changeUser({
        "id": 1,
        "username": "admin",
        "password": "123456",
        "role": {
            "roleName": "管理员",
            "roleType": 1,
            "rights": [
                "/index",
                "/user-manage",
                "/user-manage/list",
                "/right-manage",
                "/right-manage/rolelist",
                "/right-manage/rightlist",
                "/tag-manage",
                "/tag-manage/list",
                "/interview-manage",
                "/interview-manage/companylist",
                "/interview-manage/companydata",
                "/student-manage",
                "/student-manage/studentlist",
                "/student-manage/gradelist"
            ]
        }
    })
    // 跳转到首页
    router.push('/')
}

const handleMockLoginWithLecturerPrivilege = () => {
    changeUser({
        "id": 2,
        "username": "candywall",
        "password": "123456",
        "role": {
            "roleName": "讲师",
            "roleType": 2,
            "rights": [
                "/index",
                "/interview-manage",
                "/interview-manage/companylist",
                "/interview-manage/companydata",
                "/student-manage",
                "/student-manage/studentlist",
                "/student-manage/gradelist"
            ]
        }
    })
    // 跳转到首页
    router.push('/')
}
</script>

<style lang="scss" scoped>
.formContainer {
    width: 500px;
    height: 250px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba($color: #ffffff, $alpha: 0.1);
    text-align: center;
    padding: 20px;

    h3 {
        color: white;
        font-size: 30px;
    }

    .loginForm {
        margin-top: 20px;
    }

    /**
        解决样式不生效的问题 
        :deep() 是用于处理深度选择器的 SCSS 特殊语法，它能够在样式嵌套较深的情况下影响到子组件内的样式。
    */
    :deep(.el-form-item__label) {
        color: white;
    }
}
</style>